/**
 * 混合样式，适用于无法使用在 class 元素上，比 common.scss 更加智能化些
 *
 * @author Himmelbleu
 * @date 2023 年 1 月 15 日
 * @url https://www.cnblogs.com/Himmelbleu/#/
 */

@mixin flex($justify: center, $items: center, $content: center, $wrap: wrap, $row: row) {
  display: flex;
  align-content: $content;
  align-items: $items;
  justify-content: $justify;
  flex-wrap: $wrap;
  flex-direction: $row;
}

@mixin hover($border-color: bottom, $font-color: true) {
  transition: 0.3s !important;
  cursor: pointer !important;

  &:hover {
    transition: 0.3s !important;
    @if ($font-color == true) {
      color: var(--el-color-primary) !important;
    }
    @if $border-color == bottom {
      border-bottom-color: var(--el-color-primary) !important;
    } @else if $border-color == all {
      border-color: var(--el-color-primary) !important;
    }
  }
}

@mixin font-space($spacing: 1px, $line: 1.6) {
  letter-spacing: $spacing;
  line-height: $line;
}

@mixin pc() {
  @media screen and (min-width: 1000px) {
    @content;
  }
}

@mixin mb() {
  @media screen and (max-width: 1000px) {
    @content;
  }
}

@mixin textarea($height: 15rem) {
  --at-apply: rd-2 p-2 0.5 fsz-0.9;
  background-color: var(--l-textarea-bg);
  width: 100%;
  border: none;
  outline: none;
  color: var(--l-pri-color);
  height: $height;
  resize: none;
}

@mixin container() {
  --at-apply: mb-5 rd-2;
  border: 1px solid var(--el-border-color-lighter);
  background-color: var(--l-textarea-bg);
  @include hover($border-color: all, $font-color: false);
}

.textarea {
  @include container();

  textarea {
    @include textarea();
  }
}
